<template>
  <div class="admin_index">
		<div class="admin_content">
			<header class="admin_header">
				<HeaderItem
					:icon="Shop"
					color="#1356E9"
					text="总商家数"
					:count="total"/>
				<HeaderItem
					:icon="CircleCheck"
					color="#2CAB5B"
					text="活跃商家"
					:count="other_count.active_count"/>
				<HeaderItem 
					:icon="PieChart"
					color="#C37B00"
					text="待审核商家"
					:count="other_count.unactive"/>
			</header>
			<section class="admin_table">
				<div class="table_header">
					<h3>商家管理</h3>
					<section class="header-right">
						<el-input
							:prefix-icon="Search"
							v-model="name"
							placeholder="搜索商家名称或ID"></el-input>
						<el-button :icon="Refresh" style="margin-left: 10px;" type="primary">刷新</el-button>
					</section>
				</div>
				<el-table :data="tableData">
					<el-table-column label="商家ID" prop="id" width="80px"></el-table-column>
					<el-table-column label="商家名称" prop="name" show-overflow-tooltip></el-table-column>
					<el-table-column label="联系人" prop="user" show-overflow-tooltip></el-table-column>
					<el-table-column label="联系电话" prop="phone" show-overflow-tooltip></el-table-column>
					<el-table-column label="地址" prop="address" show-overflow-tooltip></el-table-column>
					<el-table-column label="简介" prop="description" show-overflow-tooltip></el-table-column>
					<el-table-column label="操作" width="164px">
						<template #default>
							<el-button :icon="Edit" size="small" type="primary">编辑</el-button>
							<el-button :icon="Delete" size="small" type="danger">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</section>
		</div>
  </div>
</template>

<script setup>
import axios from 'axios'
import { ref, computed } from 'vue'
import HeaderItem from './headerItem' 
import { Shop, CircleCheck, PieChart, Search, Refresh, Edit, Delete } from '@element-plus/icons-vue'
const name = ref('')
const total = computed(() => {
	return tableData.value.length
})
const other_count = computed(() => {
	const other = {
		active_count: 0,
		unactive: 0
	}
	for (const i in tableData.value) {
		if (tableData.value[i].active) {
			other.active_count++
		} else {
			other.unactive++
		} 
	}
	return other
})
const tableData = ref([])
function getTableData () {
	axios.request({
		url: 'http://127.0.0.1:8080/business/list',
		method: 'get'
	}).then(response => {
		tableData.value = response.data
		console.dir(response)
	})
}
getTableData()
</script>

<style scoped lang="scss">
.admin_index {
	width: 100%;
	height: 100vh;
	background-color: #F9FAFB;
	.admin_content {
		width: 1000px;
		margin: 0 auto;
		padding-top: 50px;
		.admin_header {
			width: 100%;
			height: 100px;
			display: flex;
			justify-content: space-between;
		}
		.admin_table {
			border: 1px solid #cccccc;
			border-radius: 10px;
			margin-top: 50px;
			background-color: #fff;
			.table_header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 60px;
				padding: 0 30px;
				border-bottom: 1px solid #ccc;
				.header-right {
					display: flex;
				}
			}
		}
	}
}
</style>